<template>
  <div class="rechargeDetails">
    <el-card>
      <!-- 搜索框 -->
      <div
        class="whiteSearch"
        style="font-size: 14px; color: #606266; font-weight: 800"
      >
        <span class="phone"
          >号码：<el-input
            v-model="whiteSeaData.phone"
            placeholder="请输入号码"
            size="small"
            style="width: 180px"
            clearable
          ></el-input
        ></span>
        &ensp; &ensp; &ensp;
        <el-button size="small" type="primary" @click="getWhiteData()"
          >搜索</el-button
        >
        <el-button size="small" type="primary" @click="addDialog = true"
          >添加号码</el-button
        >
        <el-dialog
          title="添加号码"
          :visible.sync="addDialog"
          width="30%"
          :before-close="handleClose"
          :close-on-click-modal="false"
          center
        >
          <el-input placeholder="请输入内容" v-model="addPhone" clearable>
          </el-input>
          <span slot="footer" class="dialog-footer">
            <el-button @click="addDialog = false">取 消</el-button>
            <el-button type="primary" @click="defAddPhone()">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <div class="whiteTab" style="margin-top: 20px">
        <!-- 记录数据 -->
        <el-table :data="WhiteData.list" stripe border style="width: 100%">
          <el-table-column prop="phone" label="号码" align="center">
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column prop="username" label="添加人" align="center">
          </el-table-column>

          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                title="你确认要删除吗？"
                @onConfirm="remWhiteData(scope.row.phone)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  size="small"
                  icon="el-icon-delete"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="pagination" style="margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.WhiteData.pageNum ? this.WhiteData.pageNum : 0"
          :page-sizes="[10, 20, 50, 100, 200]"
          :page-size="this.WhiteData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.WhiteData.total ? this.WhiteData.total : 0"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getWhite, remWhite, addWhite } from "@/api/log";
// 引入防抖函数
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      // 搜索条件
      whiteSeaData: {
        pageSize: 10,
        pageNum: 1,
        phone: "",
      },
      // 白名单数据
      WhiteData: {},
      // 添加弹框
      addDialog: false,
      // 添加号码
      addPhone: "",
    };
  },
  created() {
    this.getWhiteData();
  },
  methods: {
    // 获取表格数据
    getWhiteData: debounce(async function () {
      let WhiteData = await getWhite(this.whiteSeaData);
      if (WhiteData.code == 200) {
        this.$message({
          message: "查询成功",
          type: "success",
        });
        this.WhiteData = WhiteData.data;
      }
    }, 500),
    // 删除白名单号码
    async remWhiteData(phone) {
      let res = await remWhite(phone);
      if (res.code == 200) {
        this.$message.error(res.msg);
        this.getWhiteData();
      }
    },
    //表格分页
    async handleSizeChange(val) {
      this.whiteSeaData.pageSize = val;
      this.whiteSeaData.pageNum = 1;
      this.getWhiteData();
    },
    async handleCurrentChange(val) {
      this.whiteSeaData.pageNum = val;
      this.getWhiteData();
    },
    // 添加号码对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async defAddPhone() {
      let res = await addWhite(this.addPhone);
      if (res.code == 200) {
        this.$message({
          message: res.msg,
          type: "success",
        });
        this.addDialog = false;
        this.addPhone = "";
        this.getWhiteData();
      }
    },
  },
};
</script>

<style lang="scss" scoped></style>
